<template>
  <div class="order-statistics">
    <div class="page-header">
      <h2>订单统计</h2>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon today">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ todayStats.count }}</div>
              <div class="stat-label">今日订单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon month">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ monthStats.count }}</div>
              <div class="stat-label">本月订单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon revenue">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">¥{{ todayStats.revenue }}</div>
              <div class="stat-label">今日收入</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon total">
              <el-icon><DataBoard /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ totalStats.count }}</div>
              <div class="stat-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>订单趋势</span>
            </div>
          </template>
          <div id="orderTrendChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>订单状态分布</span>
            </div>
          </template>
          <div id="orderStatusChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计表格 -->
    <el-card class="statistics-table">
      <template #header>
        <div class="card-header">
          <span>订单详细统计</span>
          <el-button type="primary" @click="exportData">导出数据</el-button>
        </div>
      </template>
      
      <el-table :data="statisticsData" border>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="orderCount" label="订单数量" width="100" />
        <el-table-column prop="revenue" label="收入金额" width="120">
          <template #default="{ row }">
            ¥{{ row.revenue }}
          </template>
        </el-table-column>
        <el-table-column prop="paidCount" label="已支付" width="100" />
        <el-table-column prop="cancelledCount" label="已取消" width="100" />
        <el-table-column prop="refundCount" label="已退款" width="100" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { TrendCharts, Calendar, Money, DataBoard } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

export default {
  name: 'OrderStatistics',
  components: {
    TrendCharts,
    Calendar,
    Money,
    DataBoard
  },
  setup() {
    // 统计数据
    const todayStats = reactive({
      count: 25,
      revenue: 12500
    })
    
    const monthStats = reactive({
      count: 586,
      revenue: 298600
    })
    
    const totalStats = reactive({
      count: 2458,
      revenue: 1236800
    })
    
    // 详细统计数据
    const statisticsData = ref([
      {
        date: '2024-01-15',
        orderCount: 25,
        revenue: 12500,
        paidCount: 23,
        cancelledCount: 1,
        refundCount: 1
      },
      {
        date: '2024-01-14',
        orderCount: 18,
        revenue: 9200,
        paidCount: 17,
        cancelledCount: 1,
        refundCount: 0
      }
    ])
    
    // 初始化图表
    const initCharts = () => {
      // 订单趋势图
      const trendChart = echarts.init(document.getElementById('orderTrendChart'))
      trendChart.setOption({
        title: { text: '最近7天订单趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [12, 18, 15, 22, 19, 18, 25],
          type: 'line',
          smooth: true,
          itemStyle: { color: '#409EFF' }
        }]
      })
      
      // 订单状态分布图
      const statusChart = echarts.init(document.getElementById('orderStatusChart'))
      statusChart.setOption({
        title: { text: '订单状态分布' },
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: '60%',
          data: [
            { value: 1200, name: '已完成' },
            { value: 300, name: '进行中' },
            { value: 150, name: '已取消' },
            { value: 80, name: '已退款' }
          ]
        }]
      })
    }
    
    // 导出数据
    const exportData = () => {
      console.log('导出订单统计数据')
    }
    
    onMounted(() => {
      setTimeout(initCharts, 100)
    })
    
    return {
      todayStats,
      monthStats,
      totalStats,
      statisticsData,
      exportData
    }
  }
}
</script>

<style lang="scss" scoped>
.order-statistics {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    color: var(--text-color-primary);
    font-weight: 500;
  }
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  .stat-content {
    display: flex;
    align-items: center;
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      &.today { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
      &.month { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
      &.revenue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
      &.total { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
      
      .el-icon {
        color: white;
        font-size: 24px;
      }
    }
    
    .stat-info {
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-color-primary);
      }
      
      .stat-label {
        font-size: 14px;
        color: var(--text-color-regular);
        margin-top: 5px;
      }
    }
  }
}

.charts-section {
  margin-bottom: 20px;
}

.statistics-table {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style> 